<template>
  <div class="icon">
    <div class="iconItem" @click="refresh">
      <el-tooltip content="刷新">
        <el-icon :size="20">
          <RefreshRight />
        </el-icon>
      </el-tooltip>
    </div>

    <div class="iconItem" @click="fullscreen">
      <el-tooltip :content="fulls?'全屏':'退出全屏'">
        <SvgIcon v-if="fulls" name="fullscreen" size="20" class="svg"></SvgIcon>
        <SvgIcon v-else name="fullscreen-exit" size="20"></SvgIcon>
      </el-tooltip>
    </div>

    <div class="iconItem">
       <Theme></Theme>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
import Theme from '@/components/common/theme/index.vue'
import { useAppStore } from '@/stores';
const appStore=useAppStore()
const fulls=ref(true)
const fullscreen=()=>{
  // dom对象的属性：可以用来判断当前是否全屏（全屏ture否则false
    let full=document.fullscreenElement
    if(!full){
       // 全屏
       document.documentElement.requestFullscreen()
       fulls.value=false
    }else{
      // 退出全屏
      document.exitFullscreen()
      fulls.value=true
    }
}

const refresh=()=>{
  appStore.refreshCurrentPage()
}

</script>

<style lang="scss" scoped>
.icon{
  display: flex;
  align-items: center;
  .iconItem {
      padding: 8px;
      margin: 0 5px;
      cursor: pointer;
      .svg{
        fill: var(--svg-color);
      }
    }
}

</style>
